<template>
  <div class="container">
    <FullCalendar class="calendar" :options="calendarOptions" />
  </div>
  <a-modal v-model:visible="addVisible">
    <template #title> 新增提醒事项 </template>
    <a-form :model="form">
      <a-form-item field="name" label="提醒内容：" required>
        <a-textarea v-model="form.name" />
      </a-form-item>
      <a-form-item label="提醒日期：" required>
        <a-date-picker format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item field="isRead" label="相关员工：">
        <div style="display: flex; flex-direction: column; font-size: 12px">
          <a-button type="outline" style="margin-bottom: 5px"
            >选择员工</a-button
          >
          该提醒不会直接通知到员工
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import dayjs from 'dayjs';

// import Footer from '@/components/footer/index.vue';
// import LoginBanner from './components/banner.vue';
// import LoginForm from './components/login-form.vue';

let current = ref();
// 点击选择日历
const handleDateSelect = (selectInfo: any) => {
  console.log('handleDateSelect', selectInfo);
  console.log('handleDateSelect111', selectInfo.view.calendar);

  let title = prompt('Please enter a new title for your event');
  let calendarApi = selectInfo.view.calendar;

  //   calendarApi.unselect(); // clear date selection

  if (title) {
    calendarApi.addEvent({
      id: '111',
      title,
      start: selectInfo.startStr,
      end: selectInfo.endStr,
      allDay: selectInfo.allDay
    });
  }
};

const handleEventClick = (clickInfo) => {
  console.log('handleEventClick', clickInfo);
  if (
    confirm(
      `Are you sure you want to delete the event '${clickInfo.event.title}'`
    )
  ) {
    clickInfo.event.remove();
  }
};

const handleEvents = (events) => {
  console.log('handleEvents', events);
  currentEvents.value = events;
  console.log('handleEvents', currentEvents.value);
};

let currentEvents = ref([]);
let eventGuid: 0;
const createEventId = () => {
  return String(eventGuid++);
};

const calendarOptions = reactive({
  allDayText: '全天',
  buttonText: {
    today: '今天',
    month: '月视图',
    week: '周视图',
    day: '天视图',
    list: '列表'
  },
  locale: 'zh-cn',
  weekMode: 'variable',
  plugins: [
    dayGridPlugin,
    timeGridPlugin,
    interactionPlugin // needed for dateClick
  ],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  initialView: 'dayGridMonth',
  initialEvents: [
    {
      id: createEventId(),
      title: 'All-day event',
      // start: new Date().toISOString().replace(/T.*$/, '') + 'T12:00:00'
      start: dayjs().format('YYYY-MM-DD')
    },
    {
      id: createEventId(),
      title: 'Timed event',
      start: '2023-05-21',
      display: 'background'
    }
  ], // alternatively, use the `events` setting to fetch from a feed
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  weekends: true,
  select: handleDateSelect,
  eventClick: handleEventClick,
  eventsSet: handleEvents,
  themeSystem: 'bootstrap5'
});
const addVisible = ref(false);
const form = reactive({ name: '', data: '' });
</script>
<style lang="less" scoped></style>
